<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div style="width: 100%;">
      <a-row type="flex" style="justify-content: space-between;align-items: center;">
        <a-col flex="150px">
          <h1></h1>
        </a-col>
        <a-col>
          <a @click="changeDate(dateType.yesterday, null, null)" style="margin-right: 24px;">昨日</a>
          <a @click="changeDate(dateType.week, null, null)" style="margin-right: 24px;">近7天</a>
          <a @click="changeDate(dateType.month, null, null)" style="margin-right: 24px;">近30天</a>
          <a @click="changeDate(dateType.total, null, null)" style="margin-right: 24px;">总计</a>
          <a-range-picker :style="{width: '256px'}" @change="customDateChoice"/>
        </a-col>
      </a-row>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        :scroll="{x:true}"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="text" height="50px" alt="" style="max-width:120px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="rankSlot" slot-scope="text, record, index">
          <span>{{ (ipagination.current - 1) * ipagination.pageSize + parseInt(index) + 1 }}</span>
        </template>
        <template slot="percentSlot" slot-scope="text, record">
          <span v-if="record.uv > 0">{{ (Number(record.dealNum) / Number(record.uv) * 100).toFixed(2) }}%</span>
          <span v-else>-</span>
        </template>

      </a-table>

    </div>

  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import {getAction, httpAction} from '@/api/manage'


export default {
  name: 'GmsGoodSaleRankList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate
  },
  data() {
    return {
      description: '销量排行榜',
      // 表头
      columns: [
        {
          title: '排名',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          scopedSlots: {customRender: 'rankSlot'}
        },
        {
          title: '商品图片',
          align: "center",
          dataIndex: 'imgUrl',
          scopedSlots: {customRender: 'imgSlot'}
        },
        {
          title: '商品名称',
          align: "center",
          dataIndex: 'title',
          width: 250,
        },
        {
          title: '访客数',
          align: "center",
          dataIndex: 'uv',
        },
        {
          title: '销售数',
          align: "center",
          dataIndex: 'dealNum',
        },
        {
          title: '访客-支付转化率',
          align: "center",
          dataIndex: 'dealNum',
          scopedSlots: {customRender: 'percentSlot'}
        },
      ],
      url: {
        list: "/statistics/gmsGoodTransform",
      },
      dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    initDictConfig() {
    },
    initParam() {
      if (this.queryParam.type === undefined) {
        this.queryParam.type = this.dateType.total;
      }
    },
    customDateChoice(range) {
      this.changeDate(this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
    },
    changeDate(type, start, end) {
      this.queryParam.type = type;
      this.queryParam.dayStart = start;
      this.queryParam.dayEnd = end;
      this.loadData(1);
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.initParam();
      var params = this.getQueryParams()//查询条件

      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
          this.onClearSelected()
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>